.people-list {
  width:260px;
  float: left;
  background:#30373e;
  border-radius:3px 0 0 3px;
  height:92vh !important;
  
  .search {
    padding: 20px;
    
    .form-group{
        margin:0;
    }
  }
  
  
  input {
    border-radius: 3px;
    border: none;
    padding: 14px;
    color: white;
    background: #6A6C75;
    width: 90%;
    font-size: 14px;
  }
  
  .fa-search {
    position: relative;
    left: -25px;
  }
  
  ul {
    padding:0px;
    
    
    li {
      padding:10px 15px;
      list-style:none;
      &:hover{
        background:#546779;
      }
      
      .name{
        color:#fff;
        font-size:15px;
      }
    }
  }
  
  img {
    float: left;
    border-radius:50%;
  }
  
  .about {
    float: left;
    margin-top: 8px;
    padding-left: 8px;
  }
  
  .status {
    color:#999;
  }
  
}

.chat {
  width:calc(100% - 260px);
  float:left; 
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  
  color: #434651;
  
  .chat-header {
    padding: 20px;
    border-bottom: 2px solid white;
    
    img {
      float: left;
      border-radius:50%;
    }
    
    .chat-about {
      float: left;
      padding-left: 10px;
      margin-top: 6px;
    }
    
    .chat-with {
      font-weight: bold;
      font-size: 16px;
    }
    
    .chat-num-messages {
      color: $gray;
    }
    
    .fa-star {
      float: right;
      color: #D8DADF;
      font-size: 20px;
      margin-top: 12px;
    }
  }
  
  .chat-history {
    padding: 30px 30px 20px;
    border-bottom: 2px solid white;
    overflow-y: scroll;
    height: 575px;
    
    ul{
        padding:0;
        
        li{
            list-style:none;
        }
    }
    
    .message-data {
      margin-bottom: 15px;
          .message-data-name{
                font-size:16px;
                font-weight:700;
          }
    }
    
    .message-data-time {
      color: lighten($gray, 8%);
      padding-left: 6px;
    }
    
    .message {      
      color:#444;
      padding: 18px 20px;
      line-height: 26px;
      font-size: 16px;
      border-radius: 7px;
      margin-bottom: 30px;
      width: 90%;
      position: relative;
      
      &:after {
        bottom: 100%;
        left: 7%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-bottom-color:#F2F5F8;
        border-width: 10px;
        margin-left: -10px;
      }
    }
    
    .my-message {
      background:#F2F5F8;
    }
    
    .other-message {
      background:#F2F5F8;
      
      &:after {
        border-bottom-color: #F2F5F8;
        left: 93%;
      }
    }
    
  }
  
  .chat-message {
    padding: 30px;
    
    textarea {
      width: 100%;
      border: none;
      padding: 10px 20px;
      font: 14px/22px "Lato", Arial, sans-serif;
      margin-bottom: 10px;
      border-radius: 5px;
      resize: none;
      
    }
    
    .fa-file-o, .fa-file-image-o {
      font-size: 16px;
      color: gray;
      cursor: pointer;
      
    }
  }
}

.online, .offline, .me {
    margin-right: 3px;
    font-size: 10px;
  }
  
.online {
  color: #86BB71;
}
  
.offline {
  color: #E38968;
}

.me {
  color: #0498bd ;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

.float-right {
  float: right;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
@media only screen and (max-width:767px) {
    .people-list{
        width:100%;
        height:auto !important;
        
        .search{
            .form-group{
                width:60%;
                float:left;
            }
        }
        .slimScrollDiv{
            height:auto !important;
            width:100% !important;
            
            ul{
                height:auto !important;    
            }
        }
        
    }
    
    .chat{
        width:100%;
    }
}




